<template>
  <div>
    <!--    头部头像-->
    <Adaption>
      <br>
      <!--      饿了么tag标签页菜单水平分布-->
      <el-tabs class="container-tab" type="card" :stretch="true" tab-position="top">
        <el-tab-pane>
          <span slot="label"><i class="el-icon-user-solid"></i> 个人信息</span>
          <!--          传入参数-->
          <UserInfoChild v-if="ajaxFlagUserInfo" :user="user"></UserInfoChild>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label"><i class="el-icon-document"></i> 我的贴子</span>
          <UserArticles v-if="ajaxFlagMyArticle" :my-articles="myArticles"></UserArticles>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label"><i class="el-icon-chat-dot-round  item-bottom-icon"></i> 我的评论</span>
          <div class="container-tab">
            <UserComment v-if="ajaxFlagMyComment" v-for="myComment in myComments" :key="myComment.id" :my-comment="myComment"></UserComment>
            <!-- 分页开始-->
            <el-pagination
              background
              layout="prev, pager, next"
              :total="1000">
            </el-pagination>
            <!-- 分页结束-->
          </div>
        </el-tab-pane>
      </el-tabs>
    </Adaption>
  </div>
</template>

<script>
import Adaption from '../../base/Adaption'
import UserInfoChild from './UserInfoChild'
import UserArticles from './UserArticles'
import UserComment from './UserComment'
import axios from 'axios'

export default {
  name: 'UserInfo',
  components: {UserComment, UserArticles, UserInfoChild, Adaption},
  data () {
    return {
      user: {
        id: '',
        headPhoto: 'headPhoto2.jpeg',
        username: '李华',
        signature: '因为个性，所以没有签名！',
        gender: '女',
        school: '江西农业大学南昌商学院',
        email: '1028461873@qq.com'
      },
      ajaxFlagUserInfo: false,
      ajaxFlagMyArticle: false,
      ajaxFlagMyComment: false,
      myArticles: [],
      myComments: []
    }
  },
  mounted () {
    // 查询当前用户id
    axios.get('/user/getUser').then(function (res) {
      if (res.data.result) {
        // 已登录
        var uid = res.data.result.id
        // 查询用户信息
        axios.get('/user/queryUserInfoById', {params: {uid: uid}}).then(function (res) {
          this.user = res.data.result
          // 请求发送完成标志
          this.ajaxFlagUserInfo = true
        }.bind(this))
        // 查询用户写的文章
        axios.get('/article/queryArticlesByAuthorId', {params: {authorId: uid}}).then(function (res) {
          console.log(res.data)
          this.myArticles = res.data.result
          this.ajaxFlagMyArticle = true
        }.bind(this))
        // 查询用户的评论
        axios.get('/comment/queryMyComment', {params: {uid: uid}}).then(function (res) {
          console.log(res.data)
          this.myComments = res.data.result
          this.ajaxFlagMyComment = true
        }.bind(this))
      } else {
        // 未登录
        this.$router.push('/login')
      }
    }.bind(this))
  }
}
</script>
<style>
.container-tab >>> .el-tabs__content{
  flex-grow: 1;
  overflow-y: scroll;
}
</style>
